<template>
	<div class="record">
    <div class="space"></div>

		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="list" v-for="item in list" :key="item.id">
          <div class="item">
            <div class="left">
              <p class="title">{{ item.content }}</p>
              <p class="time">{{ item.create_time_text }}</p>
            </div>
            <div class="right">
              <span class="price">{{ item.total }}</span>
            </div>
          </div>
        </div>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = proxy.$cookies.get('business');

const loading = ref(false);
const refreshing = ref(false);
const finished = ref(false);
const list = ref([]);
let count = 0;
let page = 1;
let limit = 8;

// 下拉刷新
const onRefresh = async () => {
	count = 0;
	page = 1;
	finished.value = false;

	list.value = [];

	loading.value = true;

	console.log('refresh');

	onLoad();
};

// 上拉加载
const onLoad = async () => {
	if (refreshing.value) {
		refreshing.value = false;
	}

	console.log('load');

	const bool = await getList();

	loading.value = false;

	if (bool) {
		page++;

		if (count <= 0 || (count > 0 && page * limit > count)) {
			finished.value = true;
		}
	} else {
		finished.value = true;
	}
};

// 获取商品列表
const getList = async () => {
	const data = {
		page,
		limit,
		busid: business.id,
	};

	const res = await proxy.$GET({
		url: '/business/record',
		params: data,
	});

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return false;
	}

	list.value.push(...res.data.list);

	count = res.data.count;

	return true;
};
</script>

<style scoped lang="scss">
.record{
  .list{
    .item{
      display: flex;
      padding: 10px 16px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      padding-top: 14px;
      .left{
        .title{
          font-size: 13px;
          font-weight: 700;
        }
        .time{
          font-size: 12px;
          color: #999;
          margin-top: 6px;
        }
      }
      .right{
        flex: 1;
        text-align: end;
        .price{
          font-size: 16px;
          font-weight: 700;
          padding-left: 26px;
        }
      }
    }
  }
}
</style>
